<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <ui:composition template="/resources/templates/base_template.xhtml">

        <ui:define name="body">
            
            <h:form id="form_jsId">

                <p:focus for="mainMenu"/>

                <p:toolbar>
                    <p:toolbarGroup align="left">
                        <p:commandButton id="mainMenu" type="button" styleClass="position-icon-right" value="Toolbar-Button"
                                         image="ui-icon-triangle-1-s"/>
                        <p:commandButton id="tieredMenu" value="Menu"/>
                        <p:separator/>
                        <p:commandButton type="button" title="Save" image="ui-icon-disk"/>
                        <p:commandButton type="button" title="Delete" image="ui-icon-trash"/>
                        <p:commandButton type="button" title="Print" image="ui-icon-print"/>
                    </p:toolbarGroup>
                </p:toolbar>

                <p:menu trigger="mainMenu" position="dynamic" type="tiered" my="left top" at="left bottom" style="width:180px">
                    <p:submenu label="Create">
                        <p:menuitem value="New"/>
                        <p:menuitem value="Clone"/>
                    </p:submenu>
                    <p:submenu label="Save">
                        <p:menuitem value="Save"/>
                        <p:menuitem value="Save as..."/>
                        <p:menuitem value="Export..."/>
                    </p:submenu>
                    <p:separator/>
                    <p:menuitem value="Quit"/>
                </p:menu>

                <p:commandButton value="Client Datatable" action="basicDatatable" ajax="false"/>
                <p:commandButton value="Lazy Datatable" action="lazyDatatable" ajax="false"/>
                <p:commandButton value="Ext Lazy Datatable" action="extLazyDatatable" ajax="false"/>
                
                <p:tabView style="height:600px;">

                    <p:tab title="tab1">

                        <p:panel header="#{mainController.title}" style="height:400px;">

                            <p:commandButton value="Button3"/>

                            <h:panelGrid columns="2">
                                <h:outputText value="Value1" style="font-weight: bold;"/>
                                <p:selectOneMenu value="#{mainController.selectValue}" style="width:200px;" effectDuration="10" >
                                    <f:selectItem itemLabel="Select One" itemValue=""/>
                                    <f:selectItem itemLabel="Option 1" itemValue="1"/>
                                    <f:selectItem itemLabel="Option 2" itemValue="2"/>
                                    <f:selectItem itemLabel="Option 3" itemValue="3"/>
                                </p:selectOneMenu>
                                <h:outputText value="Value2"/>
                                <p:inputText value="#{mainController.inputString}"/>
                                <h:outputText value="Value3"/>
                                <p:selectOneMenu value="#{mainController.selectValue}" style="width:200px;" effectDuration="10" disabled="true">
                                    <f:selectItem itemLabel="Select One" itemValue=""/>
                                    <f:selectItem itemLabel="Option 1" itemValue="1"/>
                                    <f:selectItem itemLabel="Option 2" itemValue="2"/>
                                    <f:selectItem itemLabel="Option 3" itemValue="3"/>
                                </p:selectOneMenu>
                            </h:panelGrid>

                        </p:panel>

                    </p:tab>

                    <p:tab title="tab2">

                        <p:pickList value="#{mainController.cities}"
                                    var="city"
                                    itemLabel="#{city}"
                                    itemValue="#{city}"/>

                    </p:tab>

                    <p:tab title="tab3">

                    </p:tab>

                </p:tabView>

            </h:form>

        </ui:define>

    </ui:composition>

</html>